<template>
    <div class="{{_size}} file-item" :style="styles">
        <input type="text" class="form-control" v-model="filename" disabled v-el:real>
        <span class="input-group-btn">
	<span class="btn fileinput-button btn-{{theme}}">
		<i class="{{icon}}"></i>
		<span>{{label}}</span>
		    <input v-el:upload type="file" :accept="accept" :name="inputname" v-on:change="onChange">
		</span>
    </span>
    </div>
</template>

<style scoped>
    .fileinput-button {
        position: relative;
        overflow: hidden;
    }
    .fileinput-button input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        -ms-filter: "alpha(opacity=0)";
        font-size: 200px;
        direction: ltr;
        cursor: pointer;
    }
</style>

<script>
    import classNames from "ui/classnames.js";

    export default {
        props: {
            val: String,
            label: {
                default: "附件"
            },
            filename: String,
            size: {
                default: "normal"
            },
            theme: {
                default: "default"
            },
            icon: {
                default: "fa fa-paperclip"
            },
            inputname: {
                default: "file"
            },
            accept: {
                default: "*"
            },
            styles: {type: String, default: 'width:265px'},
            fileSize:{type: Number, default: 5}
        },
        computed: {
            _size: function() {
                //large:input-group input-group-lg
                //normal:input-group
                //small:input-group input-group-sm
                var classname = "input-group";
                var sourceMap = {
                    large: "-lg",
                    normal: "",
                    small: "-sm"
                };
                if (sourceMap.hasOwnProperty(this.size)) {
                    classname = classNames(classname, classname + sourceMap[this.size]);
                }
                return classname;
            },
            file_size(){
                return this.fileSize*1024*1024
            },
        },
        methods: {
            onChange: function(e) {
                this.val = '';
                this.filename = "";
                this.filename = e.target.files[0].name;
                if(parseInt(e.target.files[0].size) > this. file_size){
                    Midway.alert({title: "操作提示", content:'文件或图片不能大于5M'});
                    this.filename ="";
                    this.$els.upload.value = "";

                if(this.filename)
                    this.getImgBase64(e.target.files[0]); //获取事实图片base64
                //   this.$els.upload.value = "";
                }

            },
            getImgBase64(file) {
                let self = this;
                let fReader = new FileReader();
                fReader.readAsDataURL(file);
                fReader.onload = function() {
                    self.val = this.result;
                };
            }
        }
    };
</script>
